<template>
    <div class="add${Domain}">
        <div class="topNav">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                        class="lineTitle" id="option${Domain}">新建${tableNameCN}</span></el-divider>
        </div>
        <div class="${domain}SetNav">
        </div>
        <div class="addContent">
            <!--开启表单验证：:rules="rules" ref="moudle" 表单右侧验证符号 status-icon -->
            <el-form :model="${domain}" status-icon :rules="rules" label-width="100px" ref="${domain}"
                     :label-position="labelPosition" >
                <#list fieldUtilList as field>

                        <#if field.nameSmallHump="videoType">
                            <el-form-item label="${field.nameCN}" prop="${field.nameSmallHump}">
                                <el-select id="${field.nameSmallHump}" class="inputLine" v-model="${domain}.${field.nameSmallHump}" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.key"
                                            :label="item.value"
                                            :value="item.key"
                                            :disabled="item.disabled">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        <#elseif field.nameSmallHump="videoCharge">
                        <el-form-item label="${field.nameCN}" prop="${field.nameSmallHump}">

                            <el-select id="${field.nameSmallHump}" class="inputLine" v-model="${domain}.${field.nameSmallHump}" placeholder="请选择">
                                <el-option
                                        v-for="item in charge"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key"
                                        :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <#elseif field.nameSmallHump="typeId">
                        <el-form-item label="${field.nameCN}" prop="${field.nameSmallHump}">
                            <el-select id="${field.nameSmallHump}" class="inputLine" v-model="${domain}.${field.nameSmallHump}" placeholder="请选择">
                                <el-option
                                        v-for="item in moduleTypes"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key"
                                        :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <#elseif field.nameSmallHump="picList">
                        <el-form-item label="图片上传" prop="${field.nameSmallHump}">
                            <el-upload
                                    class="avatar-uploader"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <#elseif field.nameSmallHump="level">
                        <el-form-item label="${field.nameCN}" prop="${field.nameSmallHump}">
                            <el-select id="${field.nameSmallHump}" class="inputLine" v-model="${domain}.${field.nameSmallHump}" placeholder="请选择">
                                <el-option
                                        v-for="item in level"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key"
                                        :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    <#elseif field.nameSmallHump="status">
                        <el-form-item label="${field.nameCN}" prop="${field.nameSmallHump}">
                            <el-select id="${field.nameSmallHump}" class="inputLine" v-model="${domain}.${field.nameSmallHump}" placeholder="请选择">
                                <el-option
                                        v-for="item in status"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key"
                                        :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    <#elseif field.nameSmallHump="isShow">
                            <el-form-item label="${field.nameCN}" prop="${field.nameSmallHump}">
                                    <el-switch id="${field.nameSmallHump}" class="inputLine"
                                            v-model="${domain}.${field.nameSmallHump}"
                                            active-color="#13ce66"
                                            inactive-color="#ff4949"
                                            :active-value="1"
                                            :inactive-value="0"
                                    >
                                    </el-switch>
                            </el-form-item>
                    <#elseif field.nameSmallHump!="uniId"
                    && field.nameSmallHump!="moduleId"
                    && field.nameSmallHump!="videoUserId"
                    && field.nameSmallHump!="articleContent"
                    && field.nameSmallHump!="createTime"
                    && field.nameSmallHump!="updateTime"
                    && field.nameSmallHump!="iCreateTime"
                    && field.nameSmallHump!="iUpdateTime"
                    >
                    <el-form-item label="${field.nameCN}" prop="${field.nameSmallHump}">
                    <el-input id="${field.nameSmallHump}" class="inputLine" v-model="${domain}.${field.nameSmallHump}" ></el-input>
                    </el-form-item>
                    </#if>

                </#list>
                <el-form-item>
                    <!--这里save(formName)方法保存，ref别名的${domain}-->
                    <el-button id="submitBtn" type="primary" @click="save('${domain}')">立即创建</el-button>
                    <el-button @click="resetForm('${domain}')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Add${Domain}",
        props:{
            list:{
                type:Function,
                default:null
            },
        },
        data() {
            <#list fieldUtilList as field>
            <#if !field.nullAble && field.nameSmallHump=="name">
            let titleValidate = (rule, value, callback) => {
                //regular正则：数字、任意大小写字母，不可以有下划线
                //中文字符：[\u4e00-\u9fa5]
                //任意字母数字：[a-zA-Z0-9]
                //以...开头：^
                //以...结尾：$
                //中文字符：\u4e00-\u9fa5
                //字符限制3位以外正确：{0,3}$
                //js包含 rmValue.indexOf("!")
                let regBlank = /^[a-zA-Z0-9\s]{0,3}$/;
                let removeReg=/^\s*|\s{0,}$/g;

                let rmValue=value;

                if (value === '') {
                    callback(new Error('${field.nameSmallHump}不能为空'));
                } else if(regBlank.test(rmValue)){
                    callback(new Error('必须由中文、字母、数字组成，可以有空格'));
                    let ${domain}Path=document.getElementById("path");
                    this.${domain}.path='';
                    regBlank.test(rmValue);
                } else {
                    var strApp=rmValue.replace(removeReg,"");
                    console.log("去除前、中间、后 缀空格--->1去除前后空格：",strApp);
                    var blankApp=strApp.replace(/\s{1,}/g,"-");
                    console.log("去除中间空格，加入-结果：",blankApp);
                    let ${domain}Path=document.getElementById("path");
                    ${domain}Path.value=blankApp;
                    console.log("innerHtml和text不可用，只能是value(且只是控制显示)，获取到的path4：",${domain}Path);
                    //需要在显示后，继续定义${domain}Path
                    this.${domain}.path=blankApp;
                    callback();
                    regBlank.test(rmValue);
                }
            };
            </#if>
            </#list>
            <#list fieldUtilList as field>
                <#if (field.length>0)>
            let ${field.nameSmallHump}Validate=(rule,value,callback)=>{
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g,'c').length;
                }
                if(value===''){
                    callback(new Error("${field.nameCN}不能为空"));
                }else if(getLength(value)<2){
                    callback(new Error("${field.nameCN}长度至少3位"));
                }else{
                    callback();
                }
            }
                </#if>
            </#list>

            return {
                message: '这里是更新${tableNameCN}页面',
                ${domain}:{
                    <#list fieldUtilList as field>
                        ${field.nameSmallHump}:'',
                    </#list>
                    },
                labelPosition: 'left',

                rules: {
                    <#list fieldUtilList as field>
                        <#if !field.nullAble  && field.nameSmallHump=="name">
                ${field.nameSmallHump}: [
                    { validator:titleValidate, trigger: 'blur' }
                ],
                        </#if>
                        <#if (field.length>0)>
                ${field.nameSmallHump}:[
                    {validator:${field.nameSmallHump}Validate,trigger:'blur'}
                ],
                        </#if>
                    </#list>


                },
                 //文件上传：封面上传，这里的地址，vue默认搜索public，不需要添加public：../../imgs/BG-WALL.png
                imageUrl: '',
                dynamicTags: ['标签一', '标签二', '标签三'],
                inputVisible: false,
                inputValue: '',
                options:VIDEO_TYPE,
                charge:VIDEO_CHARGE,
                isShow:YES_OR_NO,
                level:LEVEL,
                status:STATUS,
                moduleTypes: MODULE_TYPE,
                //级联选择
                value: [],
                //文件上传
                fileList: [{
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }, {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }]
            }
        },
        mounted() {
            console.log(this.message);
            console.log("传入的params：",this.$route.params.${domain});
            if(this.$route.params.${domain}!=null){
                this.${domain}=this.$route.params.${domain};
                let option${Domain}=document.getElementById("option${Domain}");
                let submitBtn=document.getElementById("submitBtn");
                option${Domain}.innerHTML='更新${tableNameCN}';
                submitBtn.innerHTML="立即更新";
            }
        },
        methods: {

            //1.新增${tableNameCN}
            save(formName) {
                let _this=this;
                let responseMsg='';
                console.log("新增模组：",this.${domain});
                //前端校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        this.$axios.post(process.env.VUE_APP_SERVER+'/${module}/admin/${domain}/save',this.${domain})
                            .then((response)=>{
                                let resp=response.data;
                                responseMsg=response;
                                console.log("响应的错误信息：",responseMsg);
                                console.log("response.data：",resp);

                                if(resp.success){
                                    console.log("保存${tableNameCN}成功：",resp.responseData);
                                    this.$router.push("/${module}/${domain}/set");
                                    //引入全局变量toast提示
                                    toast.success("保存成功","bottom-end");
                                }else {
                                    this.$notify({
                                        title: '填写内容错误',
                                        message: resp.responseMsg,
                                        position:"top-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        console.log('error submit!!');
                        this.$notify({
                            title: '填写内容错误',
                            message: '请按照提示内容填写正确信息',
                            position:"top-right",
                            type: 'warning'
                        });
                        return false;
                    }
                });

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //SEO标签
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },
            //级联选择器
            handleChange(value) {
                console.log(value);
            },
            //文件上传
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        },
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topNav {

    }

    /deep/ .el-divider__text {
        background-color: #1d7dd6;
        padding: 8px 20px;
    }

    .topLine {
        background-color: #1d7dd6;
    }

    .lineIcon {
        font-size: 22px;
        color: #ffffff;
        position: relative;
        margin-right: 5px;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #ffffff;
    }

    /*${tableNameCN}设置导航*/
    .${domain}SetNav {
        max-width: 400px;
        margin: 5px auto;

    }

    .${domain}SetNavTile {
        cursor: pointer;
    }

    /*内容区位置*/
    .addContent {
        margin-left: 5%;
        margin-top: 35px;
        margin-right: 5%;
    }

    /deep/ .el-form-item {
        margin-bottom: 5px;
    }

    /*输入行控制*/
    .inputLine {
        max-width: 350px;
        float: left;
    }

    /*关键字标签*/
    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .titleLeft {
        float: left;
    }

    /*SEO描述*/
    .textAreaWidth {
        max-width: 400px;
        float: left;
    }

    /*图片上传：取消upload打开的input默认按钮*/
    /deep/ input[type=file] {
        display: none;
    }

    /*错误提示*/
    #${domain}Title{
        float: left;
    }
    /deep/ .el-form-item__error{
        float: left;
        position: relative;
        line-height: 30px;
        margin-left: 10px;
    }
    /*提示框的字符颜色*/
    /deep/ .el-input__prefix, .el-input__suffix{
        color: #44cd3f ;
        font-size: 18px;
    }
    /deep/ .el-input__icon{
        color: #44cd3f ;
        font-size: 18px;
    }
    /*是否显示*/
    /deep/ .el-switch{
        line-height: 40px;
    }

    /*头像上传：如果没有可删除，picList*/
    .avatar-uploader{
        float: left;
    }
    .avatar-uploader  {
        border: 1px dashed #a8a2a2;
        border-radius: 6px;
        cursor: pointer;
        overflow: hidden;
        text-align: center;
    }
    .avatar-uploader:hover {
        border-color: #409EFF;
    }
    .avatar-uploader:hover .avatar-uploader-icon{
        color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>